// 让小球向右下运动，遇到边缘后反弹

//小球移动的距离（增量）
var disX = 1
var disY = 1
var ball = document.querySelector(".ball")

//获取视图的宽高，元素的宽高
var w = document.documentElement.clientWidth
var h = document.documentElement.clientHeight

var ew = ball.offsetWidth
var eh = ball.offsetHeight


var maxleft = w - ew
var maxtop = h - eh


//随机范围值
function getRandomColor(min, max) {
    return Math.floor(Math.random() * (max - min) + min)
}



setInterval(function () {
    //获取元素距离视口的距离
    var rect = ball.getBoundingClientRect()
    var eLeft = rect.left
    var eTop = rect.top

    // console.log(ball.style);


    //对于边界值处理
    if (eLeft < 0) {
        disX = -disX
        ball.style.left = 0
        ball.style.backgroundColor = `rgb(${getRandomColor(0, 256)},${getRandomColor(0, 256)},${getRandomColor(0, 256)})`
    }

    if (eLeft > maxleft) {
        disX = -disX
        ball.style.left = maxleft
        ball.style.backgroundColor = `rgb(${getRandomColor(0, 256)},${getRandomColor(0, 256)},${getRandomColor(0, 256)})`
    }

    if (eTop < 0) {
        disY = -disY
        ball.style.top = 0
        ball.style.backgroundColor = `rgb(${getRandomColor(0, 256)},${getRandomColor(0, 256)},${getRandomColor(0, 256)})`
    }

    if (eTop > maxtop) {
        disY = -disY
        ball.style.top = maxtop
        ball.style.backgroundColor = `rgb(${getRandomColor(0, 256)},${getRandomColor(0, 256)},${getRandomColor(0, 256)})`
    }

    ball.style.left = eLeft + disX + 'px'
    ball.style.top = eTop + disY + 'px'


}, 1)